<template>
  <h3>Son 组件</h3>
  <hr />
  <p id="info">num 的值是：{{ num }}</p>
  <button @click="num++">+1</button>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount, onBeforeMount, onUnmounted } from 'vue'

const num = ref(0)
const timerId = ref(null)

onBeforeMount(() => {
  console.log('Son: onBeforeMount')
})

onMounted(() => {
  console.log('Son: onMounted')
})

onBeforeUnmount(() => {
  console.log('Son: onBeforeUnmount')
})

onUnmounted(() => {
  console.log('Son: onUnmounted')
})

// 在组合式 API 的 setup 中，可以使用 defineOptions 来声明选项式的 API
// defineOptions() 是 Vue3 中新增的“宏函数”，不需要导入就可以使用，
// 如果你想在 <script setup> 内部定义选项式的 API，就需要用到这个函数了。
// defineOptions({
//   beforeMount() {
//     console.log('选项式：beforeMount')
//   },
//   mounted() {
//     console.log('选项式：mounted')
//   }
// })

onBeforeMount(() => {
  console.log('组合式：onBeforeMount')
})

// 初始化图表
onMounted(() => {
  console.log('组合式：onMounted')
  var myChart = echarts.init(document.getElementById('main'))
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  })
})

// 创建延时器
onMounted(() => {
  timerId.value = setTimeout(() => {
    console.log('执行了 onMounted 中开启的延时器')
  }, 2000)
})

// 在组件销毁/卸载之前，清理延时器
onBeforeUnmount(() => {
  clearTimeout(timerId.value)
})
</script>
